<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      :before-close="closeDialog"
      :show-close="true"
      :append-to-body="true"
      :class="{'mobile-el-dialog mobile-el-dialog-form': showMobilePage}"
      :close-on-click-modal="false"
      class="global-dailog-style resource-dialog"
    >
      <otherInfo ref="otherInfo" :model-data="modelData" :row-span="rowSpan" dialog/>
      <fixed-pagination style="width: 100%; padding: 0; margin: 0; border-radius: 0px 0px 8px 8px">
        <div class="center mobile-btn-group">
          <el-button :loading="loading" size="small" class="btn mobile-btn-flex" type="primary" @click.stop="handelOk">确定</el-button>
          <el-button size="small" class="btn cancel-btn-style" type="default" plain @click.stop="closeDialog">取消</el-button>
        </div>
      </fixed-pagination>
    </el-dialog>
  </div>
</template>
<script>
import Title from '@/components/Title';
import otherInfo from '../create/model/otherInfo';
import { mapState } from 'vuex';
import { editResourceDataInfo } from '@/api/resource';
import mixins from './mixins';

export default {
  components: { Title, otherInfo },
  mixins: [mixins],
  data() {
    return {
      modelData: {},
      dialogVisible: false,
      loading: false,
      editResourceForm: {
        priceTime: [],
        payMethod: '',
        taxPoint: '',
        actualTaxPoint: '',
        mainName: '',
        organization: '',
        businessContact: ''
      }
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    openDialog(params) {
      const { data } = params || {};
      this.modelData = data;
      this.modelData.morePriceInfo = data.morePriceInfo || {};
      this.modelData.otherInfo = data.otherInfo || {};
      const { startTime, endTime } = this.modelData.morePriceInfo.priceTime || {};
      this.modelData.morePriceInfo.priceTime = startTime ? [startTime, endTime] : [];
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
      this.editResourceForm = {
        priceTime: [],
        payMethod: '',
        taxPoint: '',
        actualTaxPoint: '',
        mainName: '',
        organization: '',
        businessContact: ''
      };
    },
    handelOk() {
      const params = JSON.parse(JSON.stringify(this.editResourceForm));
      const morePriceInfo = this.modelData.morePriceInfo || {};
      const otherInfo = this.modelData.otherInfo;
      Object.keys(params).forEach(key => {
        if (morePriceInfo[key] || morePriceInfo[key] === 0) {
          params[key] = morePriceInfo[key];
        }
        if (otherInfo[key] || otherInfo[key] === 0) {
          params[key] = otherInfo[key];
        }
      });
      params.priceStartTime = params.priceTime[0] || '';
      params.priceEndTime = params.priceTime[1] || '';
      params.mediumId = this.modelData.systemId;
      this.loading = true;
      editResourceDataInfo(params).then(res => {
        this.loading = false;
        if (res.code === 200) {
          this.$message.success('修改成功');
          this.$emit('success');
        }
        this.closeDialog();
        this.$emit('getMediumData');
      }).catch(() => {
        this.loading = false;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.resource-dialog {
  ::v-deep {
    .el-dialog {
      width: 960px;
    }
    .el-dialog__body {
      padding: 6px 24px 50px 24px !important;
    }
    .width240 {
      width: 240px;
    }
    .label-collapse {
      .el-form-item {
        .el-form-item__label {
          line-height: 1.1 !important;
        }
      }
    }
  }
}
</style>
